<%--
  Created by IntelliJ IDEA.
  User: LnDamowang
  Date: 2019-01-09
  Time: 12:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>
    <script>

        function searcha() {
            var username = $("#username").val() ;
            $.post("${pageContext.request.contextPath}/supplier/querySearch",{'name':username},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#suTable").bootstrapTable('load',data) ;
            })
        }
        $(function () {
            $("#suTable").bootstrapTable({
                url:'${pageContext.request.contextPath}/supplier/querySearch',
                pageSize:2,
                pageList:[2,4,8,16],
                height:380,
                detailView:true,
                columns:[
                    {
                        checkbox:true
                    },
                    {
                        field:'id',
                        title:'编号'
                    },
                    {
                        field:'name',
                        title:'名称'
                    },
                    {
                        field:'phone',
                        title:'联系方式'
                    },
                    {
                        field:'address',
                        title:'地址'
                    },
                    {
                        title:'地址',
                        formatter:function(value,row,index){
                            return "<button class='btn  btn-primary' onclick='tofenpei("+row.address+")'><span class='glyphicon glyphicon-edit'></span>&nbsp;位置</button>"
                        }
                    }
                ],
                onExpandRow:function(index,row,$detail){
                    var table = $detail.html("<table id='oilTable'></table>").find("table");
                    table.bootstrapTable({
                           url:'${pageContext.request.contextPath}/sugoods/query?supplierId='+row.id+'',
                           pageSize:2,
                           pageList:[2,4,8,16],
                           striped:true,//隔行变色
                           columns:[
                               {
                                   checkbox:true
                               },
                               {
                                   field:'sgId',
                                   title:'编号'
                               },
                               {
                                   field:'sgName',
                                   title:'名称'
                               },
                               {
                                   field:'price',
                                   title:'进价'
                               },
                               {
                                   field:'supplierId',
                                   title:'进价'
                               },
                               {
                                   title:'操作',
                                   formatter:function(value,row,index){
                                       return "<button class='btn  btn-primary' onclick='toxiugai(("+index+"))'><span class='glyphicon glyphicon-edit'></span>&nbsp;修改</button>"
                                   }
                               }
                           ],
                       });

                }
            })
        });

        function toadd() {
             $("#addModel").modal("show")
        }
        function doadd() {
            var params = $("#addform").serialize();
            //处理表单控件的中文乱码
            params = decodeURIComponent(params,true);
            $.post("${pageContext.request.contextPath}/supplier/save",params,function (data) {
                $("#suTable").bootstrapTable('load',data);
                $("#addModel").modal("hide")
            });
        }

        function toxiugai(index) {
            //取消所有选择
            $("#oilTable").bootstrapTable("uncheckAll");
            //选中要修改的行
            $("#oilTable").bootstrapTable("check", index);
            //得到所选行的数据
            var row = $("#oilTable").bootstrapTable("getSelections")[0];
            //绑定主键
            $("input[name='sgId']").val(row.sgId);
            $("input[name='price']").val(row.price) ;
            $("input[name='sgName']").val(row.sgName);
            $("input[name='supplierId']").val(row.supplierId);
            $("#xiugaiModel").modal("show")
        }

        function doxiugai() {
            var params = $("#xiugai").serialize();
            //处理表单控件的中文乱码
            params = decodeURIComponent(params,true);
            $.post("${pageContext.request.contextPath}/sugoods/update",params,function (data) {
                alert(data)
                $("#oilTable").bootstrapTable('load',data);
                $("#xiugaiModel").modal("hide")
            });
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">供货商详情</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-6">
                        <button onclick="toadd()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
                    </div>
                    <div class="col-sm-6">
                        <form  class="form-inline pull-right">
                            <input id="username" type="text" class="form-control">
                            <button class="btn btn-primary" onclick="searcha()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <table class="table" id="suTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addModel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">添加</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="addform">
                        <div class="form-group">
                            <label for="name" class="col-sm-4 text-right">名称：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="phone" class="col-sm-4 text-right">联系方式：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="phone">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="address" class="col-sm-4 text-right">地址：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="address">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" onclick="doadd()" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="xiugaiModel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal" id="xiugai">
                        <input type="hidden" name="sgId">
                        <input type="hidden" name="supplierId">
                        <div class="form-group">
                            <label class="col-sm-4 text-right" for="username">商品名称：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="sgName"  placeholder="商品名称" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 text-right" for="username">价格：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="price"  placeholder="价格" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" onclick="doxiugai()" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>
</html>
